<template>
	<view class="overlayContent">
		<u-overlay :show="modalShow" @click="closeOverlay">
			<view class="warp">
				<!-- <view class="rect" @tap.stop></view> -->
				<!-- <u-swiper :list="lists" keyName="url" :autoplay="false" imgMode="widthFix"></u-swiper> -->
				<!-- <view class="imgBox" v-show="types=='image'">
					<image :src="urls" mode="widthFix"></image>
				</view> -->

				<view :class="isDirection?'vidBox':''" ref="vidBox" v-show="types=='video'" @tap.stop>
					<ls-dom-video ref="domVideo" class="video-item" object-fit="contain" :controls="true"
						:show-progress="false" :show-fullscreen-btn="false" :show-play-btn="false"
						:show-bottom-progress="false" :autoplay="false"
						:src="lists&&lists.length?lists[0].url:''"></ls-dom-video>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	export default {
		props: {
			types: {
				type: String,
				default: ''
			},
			// urls: {
			// 	type: String,
			// 	default: ''
			// },
			lists: {
				type: Array,
				default: []
			},
			show: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				modalShow: false,
				isDirection:false
			};
		},
		methods: {
			imgInfo(url) {
				uni.getImageInfo({
					src: url,
					success: (info) => {
						if (info.width > info.height) {
							console.log('横向');
						} else if (info.width < info.height) {
							console.log('纵向');
						} else {
							console.log('方形');
						}
					},
					fail: (err) => {
						console.error(err);
					}
				});
			},
			vidInfo(url) {
				uni.getVideoInfo({
					src: url,
					success: (info) => {
						console.log(info, 'info')
						if (info.width > info.height) {
							console.log('横向');
							this.isDirection = false
						} else if (info.width < info.height) {
							console.log('纵向');
							this.isDirection = true
							/*#ifdef APP-PLUS*/
							console.log('app')
							/*#endif*/
							
							/*#ifndef APP-PLUS*/
							// const viewElement = this.$refs.vidBox.$el;
							// viewElement.style.height = "80%"
							/*#endif*/

							
						} else {
							console.log('方形');
							this.isDirection = false
						}
					},
					fail: (err) => {
						console.error(err);
					}
				});
			},
			closeOverlay() {
				this.modalShow = false
				this.$emit('update:show', false)
			}
		},
		watch: {
			// urls: {
			// 	handler(newVal, oldVal) {
			// 		this.imgInfo(newVal)
			// 	},
			// 	deep: true
			// },
			types: {
				handler(newVal, oldVal) {},
				deep: true
			},
			lists: {
				handler(newVal, oldVal) {
					console.log(newVal, 'newVal')
					this.vidInfo(newVal[0].url)
				},
				deep: true
			},
			show: {
				handler(newVal, oldVal) {
					this.modalShow = newVal
				},
				deep: true
			}
		},
		mounted() {}
	}
</script>

<style lang="scss" scoped>
	.overlayContent {
		// width: 100%;
		// height: 100vh;

		.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;

			::v-deep .u-swiper {
				width: 100% !important;
				height: 80% !important;
				background-color: transparent !important;

				.u-swiper__wrapper {
					height: 100% !important;
					background-color: rgba(0, 0, 0, 0.2);

					.u-swiper__wrapper__item__wrapper {
						display: flex !important;
						align-items: center !important;
						justify-content: center !important;
						overflow-y: scroll;

						.u-swiper__wrapper__item__wrapper__image {
							// height: auto !important;
						}

						.u-swiper__wrapper__item__wrapper__video {
							height: auto !important;
						}
					}
				}
			}

			.vidBox {
				height: 80%;
				// width: 100%;
			}
		}

		// .rect {
		// 	width: 120px;
		// 	height: 120px;
		// 	background-color: #fff;
		// }
	}
</style>